﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>t3ex app webchat test</title>
    <style>
        body {
            background-color: black;
            font-family: Arial, Helvetica, sans-serif;
            color: #ffd800;
            padding: 0px;
            margin: 0px;
        }

        .body {
            height: 100%;
            margin-left:10px;
        }

        .header {
            margin: 6px;
            height: 40px;
        }

        .container {
            height: 400px;
            overflow-y: scroll;
        }
        .container ul, .container ul li {
            margin: 0px;
            padding: 0px;
            line-height:1.5em;
        }

        .container ul li {
            margin-top: 5px;
        }

        .container ul li .title {
            color:dodgerblue;
        }

        .login {
        }
        .footer {
            height: 100px;
            width: 100%;
        }
    </style>
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script>
        var scheme = document.location.protocol === "https:" ? "wss" : "ws";
        var port = document.location.port ? (":" + document.location.port) : "";
        var url = scheme + "://" + document.location.hostname + port + "/ws";

        $(function () {
            $('.body').hide();

            var userid = localStorage.getItem("userid");
            if (!empty(userid)) {
                $('#userid').val(userid);

                join();
            } else {
                $('#login').show();
                $('#userid').focus();                
            }

            $('#userid').bind("keyup", function (event) {
                if (event.keyCode == "13") {
                    //回车执行提交
                    join();
                }
            });
            $('#joinBtn').click(function () {
                join();
            });

            $('#message').bind('keyup', function (event) {
                if (event.keyCode == "13") {
                    //回车执行提交发送消息
                    send();
                }
            });
            $('#sendBtn').click(function () {
                send();
            });

            $('#change_userid').click(function () {
                //alert('1234');
                localStorage.setItem("userid", '');
                location.reload();
            });
        });

        function join() {
            var userid = $("#userid").val();
            //alert(userid);
            if (empty(userid)) {
                alert("您还没有填昵称哦~");
                $('#userid').focus();
                return;
            }

            connect();

        }



        function connect() {
            var userid = $("#userid").val();
            socket = new WebSocket(url + "?userid=" + userid);
            socket.onopen = function (event) {
                $('#login').hide();
                $('#container').show();

                $("#message").val('');
                $("#message").focus();

                //记录到缓存
                localStorage.setItem("userid", userid);

                //发送加入信息到服务器
                var json = { "action": "join", "fromUserId": userid, "content": '', "sendTime": nowDateTime() };
                var jsonstr = JSON.stringify(json);
                socket.send(jsonstr);

                console.log("open");
            };
            socket.onclose = function (event) {
                console.log("close");
            };
            //socket.onerror = updateState;
            socket.onmessage = function (event) {
                //console.log(event.data);
                var json = JSON.parse(event.data);
                console.log(json);
                switch (json.action) {
                    case "send_to_all":
                        $('#container').find('ul').append('<li><div class="title">' + json.fromUserId + ' ' + json.sendTime + '</div><div class="content">' + json.content +'</div></li>');
                        break;
                    case "join":
                        $('#container').find('ul').append('<li>' + json.fromUserId + '来了~</li>');
                        break;
                    case "leave":
                        break;
                    default:
                        break;
                }

                var ele = document.getElementById("main");
                if (ele.scrollHeight > ele.clientHeight) {
                    setTimeout(function () {
                        //设置滚动条到最底部
                        ele.scrollTop = ele.scrollHeight;
                        ele.style.opacity = 1;
                    }, 500);
                }
            };
        };

        function send() {
            if (!socket || socket.readyState !== WebSocket.OPEN) {
                alert("socket not connected");
                return;
            }

            var message = $("#message").val();
            var userid = $("#userid").val();
            var json = { "action": "send_to_all", "fromUserId": userid, "content": message, "sendTime": nowDateTime() };
            var jsonstr = JSON.stringify(json);
            socket.send(jsonstr);

            $("#message").val('');
            $("#message").focus();
            console.log("client:" + message);

        };

        function nowDateTime() {
            var myDate = new Date();
            return myDate.toLocaleDateString() + " " + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
        }

        function empty(str) {
            if (str == null || str == "") {
                return true;
            }else {
                return false;
            }
        }
    </script>
</head>
<body>
    <div class="body" id="login">
        <div class="login">
            <span>请输入您的昵称：</span>
            <input type="text" id="userid" name="userid" value="" />
            <input type="button" id="joinBtn" name="joinBtn" value="加入聊天室" />
        </div>
    </div>
    <div class="body" id="container">
        <h1 class="header">t3ex app webchat room</h1>
        <div><input type="button" id="change_userid" name="change_userid" value="重新设定昵称" /></div>
        <div class="container" id="main">

            <ul>
                <li>欢迎来到聊天室</li>
            </ul>
        </div>
        <div class="footer">
            <textarea id="message" name="message" style="width:80%;height:4em"></textarea>
            <input type="button" id="sendBtn" name="sendBtn" value="发送消息" />
        </div>
    </div>    
</body>
<script>
    //document.body.clientHeight - 100 - 40
    var h = document.body.clientHeight;
    console.log(h);
    $('#main').css("height",h + "px");
</script>
</html>